<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点名系统</title>
    <style>
      .item {
        margin: 0 auto;
        width: 300px;
        text-align: center;
      }

      .item span {
        height: 40px;
        display: block;
        line-height: 40px;
      }

      .item img {
        display: block;
        margin-bottom: 20px;
      }
    </style>
  </head>

  <body>
    <div class="item">
      <h1>课堂随机点名系统</h1>
      <span>姓名:<i></i></span>
      <span>年龄:<i></i></span>
      <img src="" alt="" width="300">
      <button class="btn">
        <a href="javascript:history.go(0)">随机点名</a>
        <!-- <a href="javascript:location.reload()">随机点名</a> -->
        <!-- <a href="javascript:location.assign(location)">随机点名</a> -->
      </button>
    </div>


  </body>
  <script>
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }

    function callTheRoll(Arr) {
      return Arr[getRandom(0, Arr.length - 1)];
    }
    var arr = [{
        name: '张涛',
        age: 18,
        imgurl: '../../img/0.jpg'
      },
      {
        name: '科比',
        age: 41,
        imgurl: '../../img/1.jpg'
      },
      {
        name: '詹姆斯',
        age: 35,
        imgurl: '../../img/2.jpg'
      }, {
        name: '乔丹',
        age: 45,
        imgurl: '../../img/3.jpg'
      }, {
        name: '哈登',
        age: 21,
        imgurl: '../../img/4.jpg'
      },
    ]
    var obj = callTheRoll(arr);
    console.log(obj);
    var uName = obj['name'];
    var uage = obj['age'];
    var uImgUrl = obj['imgurl'];
    var i1 = document.querySelectorAll(".item>span>i")[0];
    var i2 = document.querySelectorAll(".item>span>i")[1];
    var imgUrl = document.querySelector(".item>img");
    i1.innerHTML = uName;
    i2.innerHTML = uage;
    imgUrl.src = uImgUrl;
  </script>

</html>